    export default {
        name: "productview",
        setup(props) {
            const router = VueRouter.useRouter();
            const route = VueRouter.useRoute();
            const token = ref(localStorage.getItem('token') || '');
            const isLoading = ref(true);
            const product = ref({});
            const currentUrl = ref();
            const id = ref(route.params.id);
            const userInfo = ref({});
            
            onMounted(async() => {
                if(id.value) {
                    currentUrl.value = `${window.APP_CONFIG.baseurl}#/subpages/pay/view?id=${id.value}`;
                    loadproduct(id.value);
                }
            });
            
            // 监听 id 的变化
            watch(() => route.params.id, (newId) => {
                if (newId) {
                    loadproduct(newId);
                }
            });

            //查看内容
            const loadproduct = async (id) => {
                product.value = {};
                isLoading.value = true;
                if(token.value) {
                    userInfo.value = await getuser(); //从token获取用户信息
                    var res = await getproductdetail({id});
                }else{
                    var res = await getproductdetailhome({id}); //不登录获取内容
                }
                res.Description = arrayToHtml(res.Description);
                product.value = res;
                document.title = product.value.Name;
                isLoading.value = false;
            };
            
            //数组转html
			const arrayToHtml = (data) => {
				if(!data || data.length == 0) return '';
				var html = '';
				for (var o in data) {
					var arr = data[o]
					if (arr.value)  {
						arr.value = arr.value.replace(/\n/g, '<br>');
						if (arr.type  == 'text') {
							html = html + '<p style="margin:10px auto;text-indent: 2em;">' + arr.value  + '</p>';
						}
						if (arr.type  == 'img') {
							html = html +
								'<p style="text-align:center;margin:10px auto;"><img style="width:100%;margin:auto;" src="' +
								arr.value  + '"></p>';
						}
						if (arr.type  == 'video') {
							html = html +
								'<p style="text-align:center;margin:10px auto;"><video controls="controls" style="width:300px;margin:auto;" src="' +
								arr.value  + '"></video></p>';
						}
					}
				}
				return html;
			}
			
            // 下单操作
            const handleOrder = async () => {
                userInfo.value = await getuser(); //从token获取用户信息
                if (product.value.Stock < 1) {
                    return ElMessage.error('库存不足');
                }
                const res = await purchaseproduct({ id: product.value.ID });
                product.value.Stock = res.current_stock;            // 最新库存
                product.value.HiddenContent = res.hidden_content;   // 隐藏内容
                userInfo.value.Points = res.remaining_points;       // 更新用户积分
                ElMessage.success('购买成功');
            };
            
            //返回列表
            const goBack = async () => {
                router.push({ name: 'productList' });
            };

            return {
                id,
                product,
                loadproduct,
                goBack,
                isLoading,
                currentUrl,
                arrayToHtml,
                handleOrder,
                userInfo,
                token
            };
        },
        
        template: `
	<div class="detail-container">
		<div class="content" v-if="!isLoading">
			<div class="blog-detail">
				<!-- 标题区域 -->
				<header class="detail-header">
					<el-icon class="back-icon" @click="goBack">
						<List />
					</el-icon>
					<h1 class="title">{{ product.Name }}</h1>
				</header>

				<!-- 元信息 -->
				<div class="meta-info">
					<el-tag type="info" size="small">
						<el-icon>
							<Calendar />
						</el-icon>
						{{ $validators.formatDate(product.CreatedAt) }}
					</el-tag>
				</div>

				<!-- 商品图片 -->
				<div class="image-wrapper">
					<el-image class="product-image" :src="product.Photo" fit="cover" :preview-src-list="[product.Photo]">
						<template #error>
							<div class="image-fallback">
								<el-icon class="image-icon">
									<Picture />
								</el-icon>
								<span class="image-text">商品图片加载失败</span>
							</div>
						</template>
					</el-image>
				</div>

				<!-- 商品描述 -->
				<section class="description" v-html="product.Description" />

				<!-- 兑换区 -->
				<div v-if="!product.HiddenContent" class="action-card">
					<div class="stats-group">
						<el-tag class="stat-tag" type="warning" effect="dark">
							所需积分：{{ product.Points }}
						</el-tag>&nbsp;&nbsp;
						<el-tag class="stat-tag" :type="product.Stock > 0 ? 'success' : 'danger'" effect="dark">
							库存：{{ product.Stock }}
						</el-tag>&nbsp;&nbsp;
						<el-tag class="stat-tag" type="info" effect="dark">
							我的积分：{{ userInfo.Points || 0 }}
						</el-tag>
					</div>

					<el-button class="purchase-btn" type="primary" size="large" :disabled="product.Stock <= 0" @click="handleOrder">
						<el-icon class="btn-icon">
							<ShoppingCart />
						</el-icon>
						{{ product.Stock > 0 ? '立即兑换' : '已售罄' }}
					</el-button>
				</div>

				<!-- 隐藏内容 -->
				<div v-else class="hidden-content">
					<h3 class="content-title">兑换内容</h3>
					<pre class="content-text">{{ product.HiddenContent }}</pre>
				</div>

				<!-- 二维码 -->
				<div v-if="currentUrl" class="qrcode-section">
					<div class="qrcode-card">
						<qrcode-vue class="qrcode" :value="currentUrl" :size="200" level="H" />
						<p class="qrcode-tip">手机扫码查看详情</p>
					</div>
				</div>

				<!-- 操作按钮 -->
				<div class="footer-actions">
					<el-button class="back-btn" type="primary" plain @click="goBack">
						<el-icon>
							<ArrowLeft />
						</el-icon>
						返回列表
					</el-button>
				</div>
			</div>
		</div>
		<el-backtop :right="30" :bottom="100" />
	</div>
        `
    }